
const layer = layui.layer
const form = layui.form
//渲染页面
function render(){
  axios.get('/my/article/cates')
.then(({data:{data}}) => {
  console.log(data)
   const newarr = data.map(item=>`<tr>
   <td>${item.name}</td>
   <td>${item.alias}</td>
   <td>
   <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id=${item.Id}>编辑</button>
   <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete "data-id=${item.Id}>删除</button>
   </td>
   </tr>`).join('')
   $('#tbody').html(newarr)
})
}
render()
//添加
let addindex 
$('#btnAddCate').on('click',function(){
  addindex =  layer.open({
    content: `<form  id="addForm" class="layui-form">
    <!-- 第一行 分类名称 -->
    <div class="layui-form-item">
      <label class="layui-form-label">分类名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
          class="layui-input">
      </div>
    </div>
    <!-- 第二行 分类别名  -->
    <div class="layui-form-item">
      <label class="layui-form-label">分类别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
          class="layui-input">
      </div>
    </div>
    <!-- 第三行 按钮 -->
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo" >确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>

  </form>`,
    type: 1, 
    title: '添加图书类别',
    area: ['500px', '250px'],
    skin:'layui-layer-lan',
  });
})
$(document).on('submit', '#addForm', function(event) {
  event.preventDefault(); // 阻止默认行为
  // 其他代码
  // console.log(this);
  console.log($('#addForm'));
  const data = $(this).serialize()
  console.log(data);
axios.post('/my/article/addcates',data)
.then(({data:{status,message}}) => {
  if(status!==0){
    return layer.msg(message)
  }
  layer.msg(message);
  // $(this)[0].reset()
  layer.close(addindex)
  render()
})
});
//删除
$('#tbody').on('click','.btn_delete',function(){
//  console.log(this.dataset.id);
const id = $(this).attr('data-id')
// console.log($(this).attr('data-id'));
  axios.get(`/my/article/deletecate/${id}`)
  .then(({data:{status,message}}) => {
   if(status!==0){
    return layer.msg(message)
   }
   render()
  })
  
})



let editindex
//编辑
$('#tbody').on('click','.btn_edit',function(){
   editindex = layer.open({
  content: `<form id="editForm" lay-filter="editForm" class="layui-form">
  <!-- 第一行 分类名称 -->
  <div class="layui-form-item">
    <label class="layui-form-label">分类名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第二行 分类别名  -->
  <div class="layui-form-item">
    <label class="layui-form-label">分类别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
        class="layui-input">
    </div>
  </div>
  <!-- 第三行 按钮 -->
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
    </div>
  </div>
 
  
</form>`,
    type: 1, 
    title: '编辑图书类别',
    area: ['500px', '250px'],
    skin:'layui-layer-lan',
});
 editid = this.dataset.id
axios.get(`/my/article/cates/${editid}`)
.then(({data:{data}}) => {
  // console.log(data)
  form.val('editForm', data);
})

})
$(document).on('submit','#editForm',function(e){
  e.preventDefault()
 //  console.log(id);
 //自己做法，不是很完美
 const data = `${$(this).serialize()}&Id=${editid}`
 //教学办法
//  const data = $(this).serialize(),加一个隐藏的id收集框
 console.log(data);
  axios.post('/my/article/updatecate',data)
  .then(res => {
   // console.log(res)
   layer.close(editindex)
   render()
   layer.msg('更新成功')
  })
})